<template>
    <div class="homePageBanner">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
    data() {
        return {
            images: [
                'https://yanxuan.nosdn.127.net/static-union/16751680697f969b.png?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/1669104431a1bc74.jpg?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/16691028278830ee.jpg?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/1669104607af3111.jpg?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/1675167959fad57b.png?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/166910455990c01e.jpg?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/1669103881bd9ef2.jpg?imageView&thumbnail=750x0&quality=75',
                'https://yanxuan.nosdn.127.net/static-union/16757542988b14a3.jpg?imageView&thumbnail=750x0&quality=75'
            ],
        };
    },
};
</script>

<style >
.homePageBanner .van-swipe-item img {
    height: 18.5625rem;
    width: 100%;
}

.homePageBanner .van-swipe__indicators .van-swipe__indicator {
    width: 1.375rem;
    height: .1875rem;
    background: #fff;
    opacity: 0.7;
    border-radius: 0;
}
</style>